<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>scrollup - jQuery滚动到顶部插件演示_dowebok</title>

<style type="text/css">
body { width: 800px; margin: 8px auto 0; padding-bottom: 30px; font-size: 14px;}
h1 { margin: 20px 0 40px; text-align: center; font: 32px Microsoft Yahei;}
h2, h3 { margin: 1em 0 0.5em; font-family: Microsoft Yahei; font-weight: 500;}
p { line-height: 26px;}
pre { padding: 20px; line-height: 20px; background-color: #f0f0f0;}
.vad { margin:30px 0 5px; font-family: arial,宋体,sans-serif; text-align:center;}
.vad a { display:inline-block; margin:0 5px; padding:3px 20px; font-size:14px; text-align:center; color:#eee; text-decoration:none; background-color:#222;}
.vad a:hover { color:#fff; background-color:#000;}
table { width: 100%; border-spacing: 0; border-collapse: collapse;}
th, td { padding: 10px; border: 1px solid #ddd;}
.a728x90 { width: 728px; height: 90px; margin: 0 auto;}
</style>

<link rel="stylesheet" href="css/themes/pill.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>

<script>
/* 默认 */
$(function () {
	$.scrollUp();
});

/* 全部参数 */
/*
$(function () {
    $.scrollUp({
        scrollName: 'scrollUp', // Element ID
        topDistance: '300', // Distance from top before showing element (px)
        topSpeed: 300, // Speed back to top (ms)
        animation: 'fade', // Fade, slide, none
        animationInSpeed: 200, // Animation in speed (ms)
        animationOutSpeed: 200, // Animation out speed (ms)
        scrollText: 'Scroll to top', // Text for element
        activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
    });
});
*/
</script>
</head>

<body>
<h1>scrollUp - jQuery滚动到顶部插件演示</h1>

<p>请往下滚动，再观察右下角。</p>
<p>当网页内容过长，你浏览到底部需要回到顶部时，是不是希望&ldquo;一键直达&rdquo;呢？scrollUp 就是这样一款插件，它能够让用户滚动条滚动到一定的位置时（可设置），右下角出现&ldquo;滚动到顶部&rdquo;的按钮，点击后，页面就是慢慢的滚动到顶部，而不是硬生生的直接回到顶部，提高了用户体验。</p>

<p>scrollUp 还提供了 3 种主题，在 css 文件夹下。当然你可以自定义。</p>
<h2>使用方法</h2>
<h3>引入文件</h3>
<pre>
&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.scrollUp.min.js&quot;&gt;&lt;/script&gt;</pre>

<h3>调用方法</h3>
<pre>
<code>$(function () {
    $.scrollUp();
});</code></pre>

<h2>参数</h2>
<table>
	<thead>
		<tr>
			<th>参数</th>
			<th>说明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>scrollName</td>
			<td>绑定 id，默认为 scrollUp</td>
		</tr>
		<tr>
			<td>topDistance</td>
			<td>滚动条距离顶部多少距离时出现按钮，单位为 px，默认为 300</td>
		</tr>
		<tr>
			<td>topSpeed</td>
			<td>滚动到顶部的时间，单位为 ms，默认为 300</td>
		</tr>
		<tr>
			<td>animation</td>
			<td>按钮出现、隐藏的方式，可选 fade（淡入淡出）、slide（滑块）或 none（无）</td>
		</tr>
		<tr>
			<td>animationInSpeed</td>
			<td>按钮出现的时间</td>
		</tr>
		<tr>
			<td>animationOutSpeed</td>
			<td>按钮隐藏的时间</td>
		</tr>
		<tr>
			<td>scrollText</td>
			<td>按钮内的文字，默认为 Scroll to top</td>
		</tr>
		<tr>
			<td>activeOverlay</td>
			<td>是否显示参考线，值为十六进制颜色值或 false，默认为 false</td>
		</tr>
	</tbody>
</table>

<h2>自定义</h2>
<p>你可以通过 CSS 自定义按钮，让按钮更适合你的项目。例如：</p>
<pre>
#scrollUp {
&nbsp;&nbsp;&nbsp; bottom: 20px;
&nbsp;&nbsp;&nbsp; right: 20px;
&nbsp;&nbsp;&nbsp; padding: 10px 20px;
&nbsp;&nbsp;&nbsp; background: #555;
&nbsp;&nbsp;&nbsp; color: #fff;
}
</pre>

<p class="vad">
    <a href="https://www.dowebok.com/" target="_blank">dowebok.com</a>
    <a href="https://www.dowebok.com/9.html" target="_blank">说 明</a>
    <a href="https://www.dowebok.com/9.html" target="_blank">下 载</a>
</p>

<style>
* { margin: 0; padding: 0;}
h1 { margin: 40px 0; font: 32px "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; text-align: center;}

.vad { margin: 50px 0 10px; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; text-align:center;}
.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align: center; color: #eee; text-decoration: none; background-color: #222;}
.vad a:hover { color: #fff; background-color: #000;}
</style>

</body>
</html>